<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>登录页面</title>
		<link rel="stylesheet" href="/css/index.css" />
	</head>
	<body>
		<div class="login">
			<h2>用户登录</h2>
			<div class="login_box">
				<!-- required就是不能为空 必须在css效果中有很大的作用 -->
				<!-- 可以简写为required -->
				<input id="username" type="text" required /><label>用户名</label>
			</div>
			<div class="login_box">
				<input id="password" type="password" required /><label>密码</label>
			</div>
			<div class="buttons">
				<a onclick="login()">
					登录
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</a>
				<a  class="buttons_2"  onclick="toRegister()">
					注册
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</a>
				<p style="color: red;margin-top: 10px" id="message"></p>
				<p style="color: green;margin-top: 10px;text-align: center"  id="message2"></p>
			</div>
		</div>
	<script src="/js/jquery-3.6.0.js"></script>
	<script>
		var message2=sessionStorage.getItem("message2");
		$("#message2").html(message2);

		function login() {
			var username=$("#username").val();
			var password=$("#password").val();
			$.ajax({
				type:"post",
				url:"/login",
				data:"username="+username+"&password="+password,
				success:function (R) {
					if (R.code==200){
						sessionStorage.setItem("username",username);
						location.href="/admin/manager.html";
					}
					if (R.code==300){
						$("#message").html(R.data);
						$("#username").val("");
						$("#password").val("");
					}
				}
			})
		}

		function toRegister(){
			sessionStorage.setItem("message","");
			sessionStorage.setItem("message2","");
			location.href="/html/register.html";
		}
	</script>
	</body>
</html>
